<template>
  <div class="common-layout" :class="{ dark: dark }">
    <el-container>
      <!-- 切换主题按钮 -->
      <el-header>
        <el-card shadow="always">
          <el-row class="row-bg" justify="space-between">
            <Switch @click="toggleDarkMode" />
            <el-col :span="6">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" circle />
            </el-col>
          </el-row>
        </el-card>
      </el-header>
      <el-container>
        <el-card shadow="always" id="card">
          <!-- 侧边菜单栏 -->
          <el-aside width="200px">
            <!-- 侧边滚动条 -->
            <el-scrollbar :always="false">
              <!-- 侧边菜单栏 -->
              <el-menu :default-openeds="['1']" @open="handleOpen" @close="handleClose" router>
                <!-- 使用路由渲染模拟菜单栏 -->
                <template v-for="item in routerLists">
                  <!-- 没有子路由的菜单栏显示情况 -->
                  <template v-if="!item.children">
                    <el-menu-item :index="item.path" :key="item.name">
                      <el-icon>
                        <setting />
                      </el-icon>
                      <template #title>{{ item!.meta?.title || item.name }}</template>
                    </el-menu-item>
                  </template>
                  <!-- 有子菜单栏的显示情况 -->
                  <template v-else>
                    <el-sub-menu :index="item.path" :key="item.name">
                      <template #title>
                        <el-icon>
                          <setting />
                        </el-icon>
                        {{ item!.meta?.title || item.name }}
                      </template>
                      <!-- 子菜单栏，必须要加斜杠 -->
                      <el-menu-item :index="`${item.path}/${sonItem.path}`" v-for="sonItem in item.children"
                        :key="sonItem.name">
                        {{ sonItem!.meta?.title || sonItem.name }}
                      </el-menu-item>
                    </el-sub-menu>
                  </template>
                </template>
              </el-menu>
            </el-scrollbar>
          </el-aside>
        </el-card>
        <!-- 主题main部分和页脚部分 -->
        <el-container id="main-container">
          <el-main>
            <div class="breadcrumb">
              <!-- 面包屑 -->
              <el-breadcrumb :separator-icon="ArrowRight">
                <!-- 非最后一项的面包屑 -->
                <el-breadcrumb-item v-for="(route, index) in filteredBreadcrumbItems" :key="index"
                  :to="route.path ? { path: route.path } : null" replace>{{ route.meta?.title || route.name }}
                </el-breadcrumb-item>
                <!-- 最后一项的面包屑 -->
                <el-breadcrumb-item>
                  {{ lastBreadcrumbItem?.meta?.title || lastBreadcrumbItem?.name }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <router-view>
              <template #default="{ Component, route }">
                <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
                  <component :is="Component" :key="route.path" />
                </transition>
              </template>
            </router-view>
          </el-main>
          <el-footer>
            <div>@copy by HarmonyOS7 最强</div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo70',
};
</script>

<script lang="ts" setup>
import Switch from '@/components/switch.vue';
import 'animate.css'
import { computed, onMounted, ref, watch } from 'vue';
//组合式函数库
import { useDark } from '@vueuse/core';
//侧边菜单栏
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
// import { routerList } from '@/router/index';
import { routes } from '@/router';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute, type RouteLocationRaw } from 'vue-router'



// 引入路由对象
const router = useRouter()
const route = useRoute()
//切换主题
const dark = useDark() // 是否处于暗模式
const toggleDarkMode = () => {
  dark.value = !dark.value;
};
//侧边菜单栏
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 动态生成面包屑数据
// 计算属性：过滤掉最后一项的面包屑
const filteredBreadcrumbItems = computed(() => {
  const matched = route.matched || []
  return matched.slice(0, -1) //返回除最后一项以外的所有项
})
// 计算属性：获取最后一项
const lastBreadcrumbItem = computed(() => {
  const matched = route.matched || []
  return matched[matched.length - 1] || null
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const routerLists = ref<any>(routes[1].children)

// 使用 Vue 3 的 onMounted 生命周期钩子函数
// 这个钩子函数会在组件挂载到 DOM 后立即执行
onMounted(() => {
  // 使用 Vue Router 的 push 方法进行路由跳转
  // 'cyara' 是目标路由的路径
  router.push({ name: 'cyara' })
})

</script>

<style lang="scss" scoped>
.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.common-layout {
  width: 100%;
  height: 100%;
}

.el-container {
  height: 100%;
}


.el-header {
  padding: 0.25rem;
}

.el-menu-item {
  width: 100%;
}

.el-footer {
  padding: 0 10px;
  display: grid;
  place-items: center;
}

.el-row {
  align-items: center;
  width: 100%;
  height: 100%;
}

.el-col {
  flex: none;
}

.el-card {
  --el-card-padding: 5px .el-card__body {
    padding: 0;
  }
}

.main-container {
  margin-top: 0 !important;
}

.breadcrumb {
  display: flex;
  height: 50px;
  align-items: top;
}

.el-header {
  .el-row {
    height: 54px;
  }
}
</style>
